<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>象棋</title>
  <link rel="stylesheet" href="./css/chess.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
</head>

<body>
  <!-- 象棋小游戏 by BRYCE -->
  <!-- 一、【将（帅）】: 
    1、帅走直线，前进后退皆可。 
    2、一次只能走一格。
    3、活动范围在九宫之内。 
    4、可行处可吃敌子。 
    5、帅将不能碰面。 
    二、【车】:
    1、车走直线，格数不限制。 
    2、活动范围在整个棋盘。 
    3、可行处可吃子。
    三、【炮】: 
    1、炮走直线，格数不限，范围在整个棋盘。
    2、炮吃子时，需要炮架子：炮隔山打，炮架可远可近，可敌可我，只能隔一个子。
    （典型杀法：重炮将；解将方法：吃子解将，垫将，避将）。
    3、孤炮难鸣：一帅一将一炮，和棋。 
    4、炮勿轻发。 
    四、【马】：
    1、具有面的控制力，八面威风，尽量别往边跳。 
    2、马走日子。
    3、马的活动范围在整个棋盘。 
    4、蹩马脚，前进方向上有其他子阻挡，直－斜受阻。
    5、残局可赢：大八角马，马与将隔两格对角线距离；小八角马，马与将隔一率昆格对角线。帅用等招，可成该局。
    五、【象（相）】： 
    1、象走田字。 
    2、象不能过河界。
    3、塞象眼：在田字中心点有其他棋子（敌我皆可）阻塞，斜角过不去。
    4、可行处可吃敌子。 
    六、【士（仕）】： 
    1、活动范围在九宫之内。 
    2、士走斜线。
    3、可行处可吃敌子。 
    七、【兵（卒）】 
    1、兵不能后退。 
    2、兵每次只走一格。
    3、过河界前只能往前进一个方向，过了河后可往前往左往右。 
    4、可行处可吃敌子。 -->
  <div class="box">
    <table></table>
    <div class="dialog1">吃!</div>
    <div class="dialog2">将军!</div>
    <div class="dialog3">红先</div>
  </div>
  <div id="user">
    <div id="warp">
      <h1>中国象棋</h1>
      <div id="login">
        <label for="name">请输入你的昵称：</label>
        <input type="text" id="name" />
        <div>
          <button id="login_btn">注册</button>
        </div>
      </div>
      <div id="math">
        <button id="math_btn">寻找对手</button>
        <p id="onlines"></p>
      </div>
    </div>
  </div>

  <script type="module">
    import { socket } from "./js/socket.js";
    const MSG = "客户端消息：";
    let math_btn = document.getElementById("math_btn");
    let box = document.getElementsByClassName("box")[0];
    let user = document.getElementById("user");
    let loginview = document.getElementById("login");
    let mathview = document.getElementById("math");
    let onlines = document.getElementById("onlines");
    let login_btn = document.getElementById("login_btn");
    let datas = {};
    let timer = null;
    let strLoading = "";
    let i = 1;
    let flag = false;
    document.getElementById("login_btn").onclick = () => {
      var txtName = document.getElementById("name");
      if (txtName.value.trim() == "") {
        txtName.style.borderColor = "red";
      } else {
        socket.emit("login", { name: txtName.value });
      }
    };
    math_btn.onclick = function () {
      console.log("开始匹配" + datas.user.userId);
      socket.emit("match", { id: datas.user.userId });
      this.disabled = true;
    };

    socket.on("login", (data) => {
      // 登录
      console.log(data);
      datas = data;
      if (data.msg === 200 && datas.user.userId == data.user.userId) {
        loginview.style.opacity = 0;
        loginview.style.height = "0px";
        mathview.style.opacity = 1;
        login_btn.style.display = "none";
        var strUser = "";
        Object.keys(data.onLineUsers).forEach((key) => {
          strUser += data.onLineUsers[key].username + ",";
        });
        onlines.innerText = `当前有${data.onLineCounts}人在线：${strUser}`;
      }
    });

    socket.on("match", (data) => {
      if (datas.user.userId == data.id) {
        if (data.error) {
          console.log("匹配失败");
          clearInterval(timer);
          alert(data.msg)
          math_btn.innerText = "寻找对手"
          math_btn.disabled = false
        } else if (data.success) {
          setTimeout(() => {
            onlines.innerText = data.msg
          }, 2000);
          setTimeout(() => {
            user.style.opacity = 0;
            user.style.height = "0px";
            box.style.opacity = 1;
            box.style.position = "relative";
            user.style.display = 'none'
            clearInterval(timer);
          }, 3000);
        } else {
          timer = setInterval(function () {
            if (strLoading.length <= 3 && !flag) {
              i++;
            } else {
              flag = true;
              i--;
              if (strLoading.length == 0) {
                flag = false;
                i = 1;
              }
            }
            strLoading = ".".repeat(i);
            math_btn.innerText = "寻找对手中" + strLoading;
          }, 500);
        }
      }
    });
  </script>
  <script src="./js/chess.js" type="module"></script>
</body>

</html>